import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import CommonListPage from '../common/CommonListPage';
import CommonAvatarView from '../common/CommonAvatarView';
import ImageConstants from '../../common/ImageConstants';
import TImage from '../../components/TImage';
import BaseItem from '../common/BaseItem';
import ActivityRequestApplicantsAction from '../../actions/activity/ActivityRequestApplicantsAction';

const ITEM_HEIGHT = 160;

export default class ActivitySingerListPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._dataKey = "applicant_id";
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.activity_singer, {activity_id:this.props.pageData.routeData.activityData.activity_id,
      applicant_id:data.applicant_id});
  }

  _dealEnterPage() {
    this._initTimer = setTimeout(()=>{
     clearTimeout(this._initTimer)
     this._listView.doRefresh();
    }, 500);
  }

  _onRenderItem(data, index) {
    return (<Item data={data} />)
  }

  _getListViewStyle() {
    return {
        width:SizeUtils.getWindowSize().width,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(40)),
        backgroundColor:"#ffffff00"};
  }

  _requestData(page, listView) {
    new ActivityRequestApplicantsAction().call(listView, {activityData:this.props.pageData.routeData.activityData, page:page});
  }
}


class Item extends BaseItem {
  constructor(props) {
    super(props);

    this.state = {
      urlData: "",
    }
  }

  render() {
    return (
      <View
        style={{flex:1, flexDirection:"row",
            marginLeft:SizeUtils.translateDesignWidthToCode(40),
            marginRight:SizeUtils.translateDesignWidthToCode(40),
            paddingBottom:SizeUtils.translateDesignHeightToCode(20),
            paddingTop:SizeUtils.translateDesignHeightToCode(20),
            borderColor:"#eeeeee", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
            justifyContent:"space-between", alignItems:"center"}}>
          <View style={{flex:1, flexDirection:"row",}}>
            <CommonAvatarView avatarUri={this.props.data.avatar_url} size={160}/>
            <View style={{flex:1, flexDirection: "column", height:SizeUtils.translateDesignWidthToCode(130),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginTop:SizeUtils.translateDesignHeightToCode(38)}}>
                <Text
                  style={[CommonStyles.primaryText,
                      {fontSize:SizeUtils.translateFontSizeToCode(32),
                        fontWeight: "bold", backgroundColor:"#00000000", borderWidth:0,}]}>
                    {this.props.data.by_name ? this.props.data.by_name : "- - - -"}
                </Text>
                <Text style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(24),
                    paddingTop:SizeUtils.translateDesignHeightToCode(34),
                      backgroundColor:"#00000000", borderWidth:0,
                  }]}>
                    {this.props.data.likers_num}人投票
                </Text>
            </View>
          </View>
          <TImage source={require("../../../resource/images/common/list_btn_forward.png")}
            style={{width:16, height:28}}/>
      </View>
    )
  }

  _getShowImageSource() {
    if(this.props.data.avatar_url) {
      return {uri: this.props.data.avatar_url};
    }
    else {
      return ImageConstants.common_default_ad;
    }
  }

  _getNumImage(rowID) {
    console.log("_getNumImage", rowID);
    if(rowID < 4) {
      var source = null;
      if(rowID == 0) {
        source = require("../../../resource/images/common/1.png");
      }
      else if(rowID == 1) {
        source = require("../../../resource/images/common/2.png");
      }
      else if(rowID == 2) {
        source = require("../../../resource/images/common/3.png");
      }
      return (
      <View style={{position: "absolute", top:0,
          left:0,}}>
        <TImage source={source} style={{
          width:45, height:53}} />
      </View>
      )
    }
  }
}
